<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>服务数据</h2>
    <span>数据统计 > 服务数据</span>
    <div  id="studio_select" class="cours-gbtn">
      <div class="list-box">
        <div class="downbtn">
          <span>全部分店</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
          <li _studio_id="0">全部门店</li>
          <% current_company.studios.each do |studio| %>
            <li _studio_id="<%= studio.id%>"><%= studio.name%></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
  <div class="global-data">
    <div class="xdata-box">
      <h3>当月销售总计</h3>
      <ul>
        <li>
          <span><%== @service_total_info.total_amount %></span>
          <em>销售总业绩(元)</em>
        </li>
      </ul>
      <div id="saleCon"></div>
    </div>
    <div class="pdata-box clearfix">
      <h3>
        <span>服务顾问排行榜</span>
        <div class="pda-tit">
          <em class="pda-sel">业绩排行</em>
          <em>回访排行</em>
        </div>
      </h3>
      <div id="markRanking"></div>
    </div>
  </div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common-list.js"></script>
<script>

$(function(){


   var studio_name = "<%= @studio.present? ? @studio.name : '全部门店' %>";

   $("#studio_select .downbtn span").text(studio_name);

   $("#studio_select .dropdown-menu li").click(function(){

     location.href = "/admin/statistical_datum/service?studio_id="+$(this).attr("_studio_id");
   });
});


// 导师课消
var myChart = echarts.init(document.getElementById('saleCon'));
var xAxisData = <%== @service_total_info.dates.to_json%>;
var data1 = <%== @service_total_info.sale_amounts.to_json%>;
var data2 = [];
var data3 = [];
// for (var i = 0; i < 30; i++) {
//   if (i < 10) {
//     xAxisData.push('2016-10-0' + (i + 1));
//   } else {
//     xAxisData.push('2016-10-' + (i + 1));
//   }
//   data1.push(Math.abs((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5));
//   data2.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
//   data3.push(Math.abs((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5));
// }

option = {
  legend: {
    data: ['销售业绩(元)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: xAxisData[0]
  }, {
    type: 'inside'
  }],
    series: [{
      name: '销售业绩(元)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }],
    animationEasing: 'elasticOut',
    animationDelayUpdate: function (idx) {
      return idx * 5;
    }
};
myChart.setOption(option);
// 市场专员排行榜
var myChart1 = echarts.init(document.getElementById('markRanking'));
option1 = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '10%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: <%== @advisor_order_info.sale_names.to_json%>
  },
  series: [
  {
    name: '今天',
    type: 'bar',
    data: <%== @advisor_order_info.sale_values.to_json%>
  }
  ]
};

myChart1.setOption(option1);

//  切换  业绩排行  回访排行
//假数据
var testObj = {
  "yj" : [{
    dataY: <%== @advisor_order_info.sale_names.to_json%>,
    dataX: <%== @advisor_order_info.sale_values.to_json%>
  }],
  "hf" : [{
    dataY: <%== @advisor_order_info.comment_names.to_json%>,
    dataX: <%== @advisor_order_info.comment_values.to_json%>
  }]
}
$(".pda-tit em").on("click", function() {
  if ($(this).index() == 0) {
    myChart1.setOption({
      yAxis: {
        data: testObj.yj[0].dataY
      },
      series: [{
        data: testObj.yj[0].dataX
      }]
    });
  } else {
    myChart1.setOption({
      yAxis: {
        data: testObj.hf[0].dataY
      },
      series: [{
        data: testObj.hf[0].dataX
      }]
    });
  }
  if (!$(this).hasClass("pda-sel")) {
    $(this).addClass("pda-sel").siblings().removeClass("pda-sel");
  };
})
</script>
